<template>
  <el-row class="addRider" align="middle">
    <el-col class="col">
      <el-row align="middle">
        <el-col class="name" :span="3">骑手名称</el-col>
        <el-col :span="21"
          ><el-input v-model="deliverymanName" clearable
        /></el-col>
      </el-row>
    </el-col>
    <el-col class="col">
      <el-row align="middle">
        <el-col class="name" :span="3">骑手手机号</el-col>
        <el-col :span="21"
          ><el-input v-model="deliverymanPhone" clearable
        /></el-col>
      </el-row>
    </el-col>
    <el-col class="col">
      <el-row align="middle">
        <el-col class="button">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button></el-col
        >
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup >
import axios from "axios";
import { ref, watchEffect, defineEmits } from "vue";

const emits = defineEmits(["update", "only", "request"]);
// const props = defineProps(["info"]);
let deliverymanName = ref();
let deliverymanPhone = ref();

// watchEffect(function () {
//   xq.value = { ...props.info };
// });

watchEffect(function () {
  //   xq.value = reactive(xq.value, xq.value.communityName, xq.value.address);
  // eslint-disable-next-line no-self-assign
  deliverymanName.value = deliverymanName.value;
  // eslint-disable-next-line no-self-assign
  deliverymanPhone.value = deliverymanPhone.value;
});
const cancel = function () {
  deliverymanName.value = "";
  deliverymanPhone.value = "";
  emits("only", false);
};

const save = async function () {
  let res = await axios.post(
    "http://43.143.190.87:8091/panghudaojiaBackend/deliveryman/addDeliveryman",
    {
      deliverymanPhone: deliverymanPhone.value,
      deliverymanName: deliverymanName.value,
    }
  );
  console.log(res);
  emits("only", false);
  emits("request");
};
</script>

<style lang="less" scoped>
.col {
  margin: 10px 0;
  .row {
    margin-top: 20px;
    box-sizing: border-box;
  }
}
.name {
  padding-right: 8px;
}
.select {
  margin-bottom: 10px;
}
.button {
  text-align: right;
}
/deep/ .header {
  background-color: #1890ff !important;
  color: white;
}
</style>